<template>
  <div id="app">
    <div id="cover"></div>
    <Header></Header>

    <!--<p>vuex的使用：{{counter}}</p>-->
    <!--<p>{{fullName}}</p>-->
    <!--<p>vuex模块：{{textA}}</p>-->
    <!--<p>{{textPlus}}</p>-->
    <!--<p>textC:{{textC}}</p>-->

    <router-link to="/app">首页</router-link>
    <router-link to="/login">登录页</router-link>
    <!--<router-link to="/login/exact">登录 exact</router-link>-->

    <!-- 所有的路由变化有动画 -->
    <transition name="fade">
      <router-view></router-view>
    </transition>

    <!--<notification content="test notification" btn="xx"></notification>-->
    <button @click="notify">notify</button>

    <Footer></Footer>
  </div>
</template>
<script>
  // vuex的简化书写方式
  // import {
  // 用于调用state里的变量
  // mapState,
  // 调用getters里的方法
  // mapGetters,
  // 调用actions里的方法
  // mapActions,
  // 调用mutations里的方法
  // mapMutations
  // } from 'vuex'

  // 头部
  import Header from './layout/header.vue'
  // footer
  import Footer from './layout/footer.jsx'
  // 内容
  import Todo from './views/todo/todo.vue'

  export default {
    metaInfo: {
      title: 'hjy todo app'
    },
    data () {
      return {}
    },
    components: {
      Header,
      Footer,
      Todo
    },
    mounted () {
      // dispatch用来触发actions
      // this.$store.dispatch('updateCountAsync', {
      //  num: 5,
      //  time: 2000
      // })
      // 调用actions里的方法
      // this.updateCountAsync({
      //  num: 5,
      //  time: 2000
      // })

      // 调用模块
      // this.updateText('123')
      // 调用模块，开启同名
      // this['a/updateText']('123')
      // 调用模块的actions
      // this['a/add']()
      // 调用b模块里的actions
      // this['b/testAction']()

      // 调用mutations里的方法
      // let i = 1
      // setInterval(() => {
      //  this.updateCount({
      //    num: i++,
      //    num2: 2
      //  })
      // }, 1000)

      // 直接修改vuex里的参数（不推荐使用,不规范）
      // this.$store.state.count = 3
      // let i = 1
      // setInterval(() => {
      //  // 调用vuex的updateCount方法
      //  this.$store.commit('updateCount', {
      //    num: i++,
      //    num2: 'hjy2'
      //  })
      // }, 1000)
    },
    methods: {
      // 引用actions里的方法
      // ...mapActions(['updateCountAsync', 'a/add', 'b/testAction']),
      // 引用mutaions里的方法
      // ...mapMutations(['updateCount', 'a/updateText'])
      notify () {
        // 组件
        this.$notify({
          content: 'hjy',
          btn: 'close'
        })
      }
    },
    computed: {
      // 分模块调用方法
      // textA () {
      //  return this.$store.state.a.text
      // },

      // 方便使用组件内部的数据（调用state里的数据）
      // ...mapState({
      //  counter: 'count',
      //  textA: state => state.a.text,
      //  textC: state => state.c.text
      // })
      // 上面的方法，跟下面的方法是一样的
      // count () {
      //  获取到vuex里count的参数
      //  return this.$store.state.count
      // },
      // 调用getters里的方法
      // ...mapGetters({
      //  fullName: 'fullName',
      // 方便在模版中使用
      //  textPlus: 'a/textPlus'
      // })
      // fullName () {
      //  return this.$store.getters.fullName
      // }
    }
  }
</script>
<style lang="stylus" scoped type="text/stylus">
  #app {
    position absolute
    left 0
    right 0
    top 0
    bottom 0
  }

  #cover {
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    background-color #555
    opacity 0.5
    z-index -1
  }
</style>
